<template>
    <div class="createOrder">
        <div class="title">{{ title }}</div>
        <div class="formArea">
            <el-form :model="createForm" :rules="rules" ref="createForm" label-width="120px" size="mini">
                <el-form-item label="工艺路线编号">
                    <el-input v-model="createForm.code" placeholder="请输入,忽略将自动生成" :disabled='disabled' :maxlength="120"></el-input>
                </el-form-item>
                <el-form-item label="工艺路线名称" prop="name">
                    <el-input v-model="createForm.name" placeholder="请填写" :maxlength="120"></el-input>
                </el-form-item>
                <el-form-item label="工序列表">
                    <div class="procedureList">
                        <el-table :data="tableList" border style="width: 800px;"
                            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}"
                            ref='selTable1'>
                            <el-table-column width='55'>
                                <template slot-scope="scope">
                                    <el-button icon='el-icon-remove-outline' class='del' @click='tableDal(scope)'></el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label='类型' show-overflow-tooltip prop='lx'>
                                
                            </el-table-column>
                            <el-table-column label='工序' show-overflow-tooltip>
                                <template slot-scope='scope'>
                                    <el-form-item label="" :prop="'gylxlb'+scope.row.id">
                                        <el-select
                                            v-model="createForm['gylxlb'+scope.row.id]"
                                            remote
                                            reserve-keyword
                                            filterable
                                            placeholder="请选择"
                                            :remote-method="remoteMethod"
                                            :loading="selLoading"
                                            @focus='getFocus()'
                                            @change='handleChange(scope.row)'
                                            ref="processRadio">
                                            <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label='报工数配比' show-overflow-tooltip>
                                <template slot-scope='scope'>
                                    <div>  
                                        <el-form-item label="" :prop="'bgspb'+scope.row.id">
                                            <el-input-number
                                                v-model="createForm['bgspb'+scope.row.id]"
                                                controls-position="right"
                                                size="mini"
                                                placeholder='请填写'>
                                            </el-input-number>
                                        </el-form-item>
                                    </div>
                                </template>
                            </el-table-column>
                            <div slot="empty">
                                <el-empty :image-size="100"></el-empty>
                            </div>
                        </el-table>
                        <div class='addBox'>
                            <div @click='tableAdd'>
                                <el-button icon='el-icon-circle-plus-outline' class='add'></el-button>
                                添加一行
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
            <el-button type="primary" plain size="small" @click="$router.push('/basicData/bom')">取消
            </el-button>
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {
        processOther,
        processRouteHandle,
        processRouteDetail
    } from '@/api/baseController'
    export default {
        data() {
            return {
                validate: (rule, value, callback) => {
                    if (value == null) {
                        callback(new Error('报工数配比不能为空'));
                    } else if (value < 1) {
                        callback(new Error('报工数配比必须大于0'));
                    } else {
                        callback();
                    }
                },
                title: '创建工艺路线',
                createForm: {
                    code: '',
                    name: '',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '工艺路线名称不能为空',
                        trigger: 'blur'
                    }]
                },
                disabled: false,
                wd_tableHeaderList: [
                    {
                        name: '类型',
                        label: 'lx',
                        width: '',
                    },
                    {
                        name: '工序/工艺路线',
                        label: 'gylxlb',
                        width: '',
                    },
                    {
                        name: '报工数配比',
                        label: 'bgspb',
                        width: '',
                    }
                ],
                tableList: [],
                options: [],
                loading: false,
                selLoading: false,
                searchItem: {
                    num: 0
                },
                successMsg: '创建成功'
            }
        },
        mounted() {
            this.getProcessOther({name: ''})
            if(this.$route.query.new) {
                this.successMsg = '编辑成功'
                this.title = '编辑工艺路线'
                this.getProcessRouteDetail({ id: this.$route.query.id})
            }
            var routerData = this.$route.meta.breadList
            this.$route.meta.breadList[routerData.length - 1].name = this.title
        },
        methods: {
            // 工序详情
            getProcessRouteDetail(data) {
                processRouteDetail(data).then(res => {
                    if(res.code == 200) {
                        for(let i in res.data) {
                            this.createForm[i] = res.data[i]
                        }
                        this.createForm.list = JSON.parse(res.data.processList)
                        if(this.createForm.list) {
                            this.createForm.list.map((item, i) => {
                                this.tableList.push({
                                    id: i + 1,
                                    lx: item.type,
                                })
                                this.$set(this.createForm, 'gylxlb'+(i+1), item.name)
                                this.$set(this.createForm, 'bgspb'+(i+1), item.rate)
                            })
                        }
                    }
                })
            },
            // 工序下拉数据
            getProcessOther(data) {
                processOther(data).then(res => {
                    this.selLoading = false
                    if(res.code == 200) {
                        this.options = res.data.map(item => {
                            return {
                                value: `${item.id}`,
                                label: `${item.name}`,
                                code: `${item.code}`,
                            };
                        });
                    }
                })
            },
            // 工序新增编辑
            getProcessRouteHandle(data) {
                processRouteHandle(data).then(res => {
                    if(res.code == 200) {
                        this.utils.showMsg(this.successMsg, 'success')
                        this.$router.push('/basicData/bom')
                    }
                })
            },

            //保存
            save() {
                this.$refs.createForm.validate((valid) => {
                    if (valid) {
                        let list = []
                        this.tableList.map((item, i) => {
                            list.push({
                                id: this.selDataHandle(this.createForm['gylxlb'+(i+1)], 10),
                                type: '工序',
                                rate: this.createForm['bgspb'+(i+1)],
                                name: this.selDataHandle(this.createForm['gylxlb'+(i+1)], 1),
                                code: this.selDataHandle(this.createForm['gylxlb'+(i+1)], 2),
                                order: i + 1
                            })
                        })
                        let data = {
                            name: this.createForm.name,
                            code: this.createForm.code,
                            list: list,
                        }
                        this.createForm.id ? data.id = this.createForm.id : ''
                        if(data.list.length == 0) {
                            this.utils.showMsg('工序列表不能为空', 'error')
                        } else {
                            this.getProcessRouteHandle(data)
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 类型选择
            radioChange() {
            },
            tableAdd() {
                this.tableList.push({
                    id: this.tableList.length + 1,
                    lx: '工序'
                })
                this.rules['bgspb' + (this.tableList.length)] = [{
                    validator: this.validate, trigger: 'change'
                }]
                this.rules['gylxlb' + (this.tableList.length)] = [{
                    required: true,
                    message: '工序/工艺路线名称不能为空',
                }]
            },
            tableDal(v) {
                this.tableList.splice((v.row.id - 1), 1)
                let arr = []
                let arr1 = []
                for(let key in this.createForm) {
                    if(key.indexOf('bgspb') != -1) {
                        arr.push(this.createForm[key])
                    }
                    if(key.indexOf('gylxlb') != -1) {
                        arr1.push(this.createForm[key])
                    }
                }
                arr.splice((v.row.id - 1), 1)
                arr1.splice((v.row.id - 1), 1)
                this.tableList.map((item, i) => {
                    item.id = i + 1
                })
                this.createForm = this.handleCreateForm(this.createForm, 'bgspb')
                this.createForm = this.handleCreateForm(this.createForm, 'gylxlb')
                this.rules = this.handleCreateForm(this.rules, 'bgspb')
                this.rules = this.handleCreateForm(this.rules, 'gylxlb')
                arr.map((item, i) => {
                    this.createForm['bgspb' + (i + 1)] = item ? item : ''
                })
                arr1.map((item, i) => {
                    this.createForm['gylxlb' + (i + 1)] = item ? item : ''
                })
                console.log(this.tableList)
            },
            // createForm处理
            handleCreateForm(obj, val) {
                for(let key in obj) {
                    if(key.indexOf(val) != -1) {
                        delete obj[key]
                    }
                }
                return obj
            },
            getFocus() {
                if(this.searchItem.num == 0) {
                    this.remoteMethod('')
                    this.searchItem.num++
                }
            },
            remoteMethod(query) {
                this.selLoading = true
                this.getProcessOther({ name: query })
            },
            handleChange(d) {
                this.createForm['bgspb' + d.id] = 1
                this.$nextTick(() => {
                    this.$refs.processRadio.blur()
                })
            },
            // 下拉数据处理
            selDataHandle(d, n) {
                let that = this
                let obj = this.options.find(function(item) {
                    if(d == Number(d)) {
                        return item.value == d
                    } else {
                        return item.label == d
                    }
                })
                if(n == 1) {
                    return obj.label
                } else if(n == 2) {
                    return obj.code
                } else {
                    return obj.value
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .createOrder {
        overflow: auto;
        .title {
            font-size: 22px;
            padding: 20px 0 15px 20px;
        }
        .formArea {
            width: 420px;
            padding: 0px 0px 0px 20px;
        }
        .procedureList {
            width: 800px;
            .del {
                color: red !important;
                border: none;
                font-size: 18px;
                padding: 0;
                display: flex;
                justify-content: center;
                width: 100%;
                background: transparent;
            }
            .addBox {
                color: #02b980;
                font-size: 12px;
                display: flex;
                align-items: center;
                padding: 12px;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
                cursor: pointer;
                .add {
                    color: #02b980;
                    border: none;
                    background: transparent;
                    font-size: 16px;
                    padding: 0;
                }
                span {
                    color: rgb(155, 155, 155);
                    margin-left: 10px;
                }
            }
        }

        .btn {
            margin: 25px 0 20px 70px;
            text-align: center;
            display: inline-block;
            width: 420px;

            /deep/ .is-plain {
                margin-right: 10px;
            }

            /deep/ .el-button--primary {
                width: 130px;
                span {
                    margin-left: 0;
                }
            }
        }

        /deep/ .el-input-number--mini {
            width: 100%;
        }

        /deep/ .el-autocomplete {
            width: 100%;
        }

        /deep/ .el-range-editor--mini.el-input__inner {
            width: 100%;
        }

        /deep/ .el-table__empty-text {
            .el-empty {
                padding: 0;
            }
        }

        /deep/ .el-empty__image {
            height: 60px;
        }

        /deep/ .el-empty__image svg {
            vertical-align: text-top;
        }

        /deep/ .el-empty__description {
            margin-top: 10px;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 7;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-input-group__append {
            background-color: #02b980;
            color: white;
        }
    }
</style>